<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String path = request.getContextPath();%>
    	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    	<title>网站配置 </title>
<jsp:include page="/web/manager/inc/header.jsp"></jsp:include>
		<div class="row page-titles mx-0">
                        <div class="col-sm-6 p-md-0">
                            <div class="welcome-text">
                                <h4 class="text-primary">网站配置</h4>
                            </div>
                        </div>
         </div>
         <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
		                           	 <div class="window" id="window" >
		                            		<h3>添加config</h3>
		                            		<form >
		                            			<fieldset>
		                            			 	基本描述:
		                            			 	<input type="text" name="des" >
		                            			</fieldset>
		                            			<br>
		                            			<fieldset>
		                            			 	key:
		                            			 	<input type="text" name="key">
		                            			</fieldset>
		                            			<br>
		                            			<fieldset>
		                            				val:
		                            			 	<input type="text" name="val">
		                            			</fieldset>
		                            			<br>
		                            			<input id="canceladd" type="button" value="取消">
		                            			<input id="saveadd" type="submit" value="保存">
		                            		</form>
		                            </div>
                                <div class="card-body">
                                <span class="text badge badge-primary" id="add">添加配置</span>
                                    <div class="table-responsive">
                                    <form action="">
                                        <table id="example3" class="display nowrap">
                                            <thead>
                                                <tr>
                                                    <th>Id</th>
                                                    <th>描述用途</th>
                                                    <th>键</th>
                                                    <th>值</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            	<c:forEach items="${configList }" var ="config">
													<tr id="${config.id }">
														<td id="configId">${config.id }</td>
														<td>
															<div class="form-group">
																<input id="des" name="" type="text" class="form-control" value="${config.description }" />
															</div>
														</td>
														<td>
															<div class="form-group">
																<input id="key" name="" type="text" class="form-control" value="${config.key }" />
															</div>
														</td>
														<td>
															<div class="form-group">
																<input id="val" name="" type="text" class="form-control" value="${config.value }" />
															</div>
														</td>
														<td>
														<span class="text badge badge-primary" id="del">删除</span>
														<span class="text badge badge-primary" id="save">保存</span>
														</td>
													</tr>
                                            	</c:forEach>

											</tbody>
                                        	</table>
                                        	
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>

  <jsp:include page="/web/manager/inc/footer.jsp"></jsp:include>
  <script>
  		var path = "${pageContext.request.contextPath}";
  		$(function(){
  			$("table").on("click","#save",save);
  			$("table").on("click","#del",del);
  			$("#add").on("click",add);
  			$("#canceladd").on("click",canceladd);
  			$("#saveadd").on("click",saveadd);
  		})
  		function saveadd(){
  			var des = $("input[name='des']").val();
  			var key = $("input[name='key']").val();
  			var val = $("input[name='val']").val();
  			if(des!=""&&key!=""&&val!=""){
	  			$.post(path+"/ManagerController?action=addConfig&des="+des+"&key="+key+"&val="+val,function(){
		  			$("#window").css("display","none");
	  			})
  			}
  			else{
  				alert("不能为空")
  			}
  		}
  		function canceladd(){
  			$("#window").css("display","none");
  		}
  		function add(){
  			$("#window").css("display","block");
  		}
  		function save(){
  			var flag = confirm("确定保存？");
  			var des = $(this).parent().parent().find("#des").val();
  			var key = $(this).parent().parent().find("#key").val();
  			var val = $(this).parent().parent().find("#val").val();
  			var id = $(this).parent().parent().find("#configId").html();
  			var result ={}
  			result.des=des;
  			result.key=key;
  			result.val=val;
  			result.id=id;
  			var resultJSON = JSON.stringify(result);
  			//var resultJSON = "123";
  			//console.log(resultJSON);
  			if(flag){
  				//执行ajax 保存方法
  				$.ajax({
						type : "post",
						url :path+"/ManagerController?action=saveConfig",
						//contentType : "application/json;charset=UTF-8",
						data :{"r":resultJSON},
						success : function(data) {
				 			alert("保存成功")
						}
					})
  			}
  		}
  		function del(){
  			var flag = confirm("确定删除？");
  			if(flag){
	  			$(this).parent().parent().remove();
  				//执行ajax 存储方法
  				var id = $(this).parent().parent().find("#configId").html();
  				$.post(path+"/ManagerController?action=delConfig&id="+id,function(){
  					alert("删除成功");
  				})
  			}
  		}
  </script>
   <style>
		  #example3_paginate , .dataTables_info{
		  		display: none;
		  }
		  #add:hover {
		  	cursor: pointer;
		  }
		  .card{
		  	position:relative;
		  }
		  #window{
		  	position:absolute;
		  	margin:0 auto;
		  	width: 400px;
		  	height: 220px;
		  	left:400px;
		  	background-color: #ccc;
		  	text-align: center;
		  	display: none;
		  	border-radius: 30px;
		  }
		  fieldset:first-child{
		  	margin-left: -30px;
		  }
  </style>